<template>
  <v-list expand flat>
    <v-list-group
        no-action
        color="#333"
        :value="true"
        :ripple="false">
      <template v-slot:activator>
        <v-list-item-content>
          <v-list-item-title>课程分级</v-list-item-title>
        </v-list-item-content>
      </template>
      <v-item-group
          v-model="filterValue.grade"
          class="mb-4"
          mandatory
          @change="updateFilter">
        <v-row no-gutters class="mx-n1">
          <v-col
              class="ma-1">
            <v-item v-slot="{ active, toggle }">
              <v-btn
                  block
                  @click="toggle"
                  :color="active ? 'primary' : ''"
                  depressed>
                不限
              </v-btn>
            </v-item>
          </v-col>
          <v-col
              class="ma-1">
            <v-item v-slot="{ active, toggle }">
              <v-btn
                  block
                  @click="toggle"
                  :color="active ? 'primary' : ''"
                  depressed>
                初级
              </v-btn>
            </v-item>
          </v-col>
        </v-row>
        <v-row no-gutters class="mx-n1">
          <v-col
              class="ma-1">
            <v-item v-slot="{ active, toggle }">
              <v-btn
                  block
                  @click="toggle"
                  :color="active ? 'primary' : ''"
                  depressed>
                中级
              </v-btn>
            </v-item>
          </v-col>
          <v-col
              class="ma-1">
            <v-item v-slot="{ active, toggle }">
              <v-btn
                  block
                  @click="toggle"
                  :color="active ? 'primary' : ''"
                  depressed>
                高级
              </v-btn>
            </v-item>
          </v-col>
        </v-row>
      </v-item-group>
    </v-list-group>
    <v-list-group
        no-action
        color="#333"
        :value="true"
        :ripple="false">
      <template v-slot:activator>
        <v-list-item-content>
          <v-list-item-title>价格区间</v-list-item-title>
        </v-list-item-content>
      </template>
      <v-range-slider
          class="mx-3 mt-10"
          v-model="filterValue.priceRange"
          max="500"
          min="0"
          hide-details
          hide-spin-buttons
          thumb-label="always"
          thumb-size="36"
          @change="updateFilter">
        <template v-slot:thumb-label="{ value }">
          {{ `￥${value}` }}
        </template>
        <template v-slot:append>
          <v-text-field
              label="最低价格"
              v-model="filterValue.priceRange[0]"
              outlined
              dense
              hide-details
              hide-spin-buttons
              prefix="￥"
              height="35"
              type="number"/>
          <div class="mx-3 grey--text text--darken-1">—</div>
          <v-text-field
              label="最高价格"
              v-model="filterValue.priceRange[1]"
              outlined
              dense
              hide-details
              hide-spin-buttons
              prefix="￥"
              height="35"
              type="number"/>
        </template>
      </v-range-slider>
    </v-list-group>
  </v-list>
</template>

<script>
/**
 * @description 课程筛选器
 * @property {Object} value 课程筛选器的值
 * @event update() 课程筛选器触发更新
 * @example <courseFilter v-model="..." @update="..."/>
 */
export default {
  name: "courseFilter",
  props: {
    value: {
      type: Object,
    }
  },
  data() {
    return {
      filterValue: {
        grade: '',
        priceRange: [0, 500],
      }, //课程筛选器的值
    }
  },
  methods: {
    // 课程筛选器触发更新
    updateFilter() {
      this.$emit('update', this.filterValue);
    }
  },
  computed: {
    // 映射props中的value，强制在值变化时触发监听器
    getValue() {
      return this.value;
    }
  },
  watch: {
    getValue(nval) {
      this.filterValue = nval;
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
@import "courseFilter";
</style>